<template>
	<view class="content">
		<view style="position: relative;">
			<image class="bg" :src="$store.state.images.my_1" :style="{'height': bgHeight + 'px'}"></image>
		</view>
		
		<view class="card">
			<view class="user">
				<view v-if="isLogin" class="user-btn" plain >
					<button class="logo" plain open-type="chooseAvatar"
						@chooseavatar="onchooseavatar">
						<image style="width: 100%; height: 100%;" mode="widthFix" :src="userInfo.ProfileImageRul">
						</image>
						<text class="logo-edit">
							编辑
						</text>
					</button>
					<text class="name" >{{ userInfo.MemberName }}</text>
				</view>
				<button v-else class="user-btn" plain open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">
					<button class="logo" plain open-type="chooseAvatar"
						@chooseavatar="onchooseavatar">
						<image style="width: 100%; height: 100%;" mode="widthFix" :src="userInfo.ProfileImageRul">
						</image>
						<text class="logo-edit">
							编辑
						</text>
					</button>
					<text class="name" >请先登录</text>
				</button>
				<view class="edit-container" @click="editName">
					<image class="ic-edit" src="../../static/ic_edit.png" mode="widthFix"></image>
					<text>编辑</text>
				</view>
			</view>
			
			<view class="buttons">
				<!-- <view style="display: flex; flex-direction: column; align-items: center; flex: 1;" @click="doc">
					<image class="icon" src="../../static/ic_family.png" mode="widthFix"></image>
					<text>家庭视力档案</text>
				</view> -->
				<view style="display: flex; flex-direction: column; align-items: center; flex: 1;" @click="xmbDoc">
					<image class="icon" src="../../static/ic_my_lib.png" mode="widthFix"></image>
					<text>星梦保档案</text>
				</view>
				<view style="display: flex; flex-direction: column; align-items: center; flex: 1;" @click="collect">
					<image class="icon" src="../../static/ic_like_2.png" mode="widthFix"></image>
					<text>收藏</text>
				</view>
				<view style="flex: 1;"></view>
			</view>
			<!-- <view class="buttons">
				<view style="display: flex; flex-direction: column; align-items: center; flex: 1;" @click="protocol">
					<image class="icon" src="../../static/ic_my_lib.png" mode="widthFix"></image>
					<text>条款协议</text>
				</view>
				<view style="flex: 1;"></view>
				<view style="flex: 1;"></view>
			</view> -->
		</view>
		
		<view class="protocol" @click="protocol">
			条款协议
		</view>
	</view>
</template>

<script>
	import { mapState } from "vuex";
	import { readFileBase64 } from '../common/utils'
	export default {
		data() {
			return {
				
			}
		},
		computed: {
			...mapState([
				"isLogin",
				"userInfo",
				"screenWidth",
			]),
			bgHeight() {
				return this.screenWidth * 442.581 / 428;
			},
		},
		methods: {
			doc() {
				uni.navigateTo({
					url: "/pages/my/doc"
				})
			},
			xmbDoc() {
				uni.navigateTo({
					url: "/pages/home/xmbDoc"
				})
			},
			collect() {
				uni.navigateTo({
					url: "/pages/my/collect"
				})
			},
			protocol() {
				uni.navigateTo({
					url: "/pages/my/protocol"
				})
			},
			onGetPhoneNumber(e){
				console.log("onGetPhoneNumber", e);
				if (!e.detail.code) {
					uni.showToast({
						title: "用户拒绝",
						icon: 'none',
					})
					return;
				}
			    // if(e.detail.errMsg=="getPhoneNumber:fail user deny"){       //用户决绝授权  
			
			    //     uni.showModal({
			    //     	title: "提示",
			    //     	content: "用户拒绝",
			    //     })
			
			    // } else if (e.detail.errno==102){
				// 	uni.showModal({
				// 		title: "提示",
				// 		content: "没有权限",
				// 	})
				// }else {      //允许授权  
			    //     console.log(e.detail.encryptedData)  
			    //     e.detail.encryptedData      //加密的用户信息  
			    //     e.detail.iv     //加密算法的初始向量  时要用到  
			    // }
				const {
					encryptedData,
					code: phoneCode,
					iv,
					errno,
					errMsg,
				} = e.detail;
				
				if (errno) {
					uni.showModal({
						content: errMsg,
						title: "提示",
					})
					return;
				}

				const _this = this
				uni.login({
					provider: "weixin",
					success: function(res) {
						console.log("weixin login", res);
						const { errMsg, code } = res;
						if (errMsg === "login:ok") {
							// TODO phoneCode需要权限获取
							_this.$store.dispatch("register", { code, phoneCode })
						} else {
							uni.showModal({
								content: "微信登录失败",
								title: "提示",
							})
						}
					},
				})
			},
			chooseIcon() {
				let _this = this
				uni.chooseImage({
					count:1,
					fail: (err) => {},
					success: (ret) => {
						console.log('choose icon ret', ret)
						const file = ret.tempFilePaths[0]
						if (file) {
							readFileBase64(file).then((res) => {
								_this.$store.dispatch("updateUserInfo", { ProfileImageRul: 'data:image/jpeg;base64,' + res.data })
							})
						}
					}
				})
			},
			onchooseavatar(e) {
				const { avatarUrl } = e.detail
				console.log("onchooseavatar", avatarUrl)
				let _this = this
				readFileBase64(avatarUrl).then((res) => {
					_this.$store.dispatch("updateUserInfo", { ProfileImageRul: 'data:image/jpeg;base64,' + res.data })
				})
			},
			editName() {
				let _this = this
				uni.showModal({
				    title: '请输入新的昵称',
				    content: '',
				    editable:true,//是否显示输入框
					placeholderText:'新的昵称',//输入框提示内容
				    confirmText: '确认',
				    cancelText: '取消',
				    success: (res) => {
				        if (res.confirm) {
				        	console.log('输入的内容：', res.content);
							_this.$store.dispatch("updateUserInfo", { MemberName: res.content})
				        }
				    } 
				});
			},
		},
		mounted() {
			console.log("My", "mounted called.");
		}
	}
</script>

<style>
	.content {
		font-family: "yshst" !important;
		display: flex;
		flex-direction: column;
	}
	.bg {
		width: 100vw;
		height: auto;
	}
	.card {
		background-color: white;
		border-radius: 15rpx;
		margin-top: -80rpx;
		margin-left: 35rpx;
		margin-right: 35rpx;
		position: relative;
		padding: 25rpx;
	}
	.user {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.user .user-btn {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 0;
		flex: 1;
		background-color: transparent;
		border: none !important;
		border-width: 10px;
		outline-color: red;
		outline-width: 10px;
		/* border-radius: 20px; */
		overflow: hidden;
	}
	.user .logo {
		width: 120rpx;
		height: 120rpx;
		background-color: #e5f2f9;
		border-radius: 100rpx;
		min-width: 120rpx;
		position: relative;
		border: none;
	}
	.user .logo-edit {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		color: #999999;
		line-height: 120rpx;
		text-align: center;
		font-size: 20rpx;
	}
	.user .name {
		font-size: 35rpx;
		color: #50c0f9;
		margin: 0 20rpx;
		flex: 1;
		text-align: left;
		/* background-color: red; */
		padding: 10rpx 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.user .edit-container {
		display: flex;
		flex-direction: row;
		align-items: center;
		color: #999999;
		margin-right: 10rpx;
	}
	.ic-edit {
		width: 25rpx;
		margin-right: 10rpx;
	}
	.buttons {
		display: flex;
		align-items: center;
		flex-direction: row;
		justify-content: space-between;
		font-size: 30rpx;
		margin-top: 50rpx;
		margin-bottom: 20rpx;
	}
	.buttons .icon {
		width: 80rpx;
		height: 80rpx;
		margin-bottom: 20rpx;
		box-sizing: border-box;
	}
	.protocol {
		margin-left: 35rpx;
		margin-top: 35rpx;
		padding-left: 35rpx;
		padding-right: 35rpx;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		text-decoration: underline;
	}
</style>
